MapLayer = Eg.Class.extend({
  init: function(index, name, editor, tileset){
    this.dimentionX = MEConfig.LayerDefaults.dimentionX;
    this.dimentionY = MEConfig.LayerDefaults.dimentionY;
    this.tilesize = MEConfig.LayerDefaults.tilesize;
    this.distance = MEConfig.LayerDefaults.distance;
    this.repeat = MEConfig.LayerDefaults.repeat;
    this.linkCollision = false;
    this.tile = new Tile(tileset, MEConfig.EditorDefaults.ratio, this.tilesize);
    this.initData();
    
    var self=this;
    //this.layer = layer;
    this.ratio = editor.ratio;
    this.indent = editor.indent;
    this.index = index;
    this.name = name;
    var layerWidth = this.ratio * this.dimentionX * this.tilesize;
    var layerHeight = this.ratio * this.dimentionY * this.tilesize;

    var zeroAxis = {left: this.indent * 1.5, top: this.indent * 1.5};
    if(editor.layersCount > 0){
        for(var key in editor.layers)
        {
            zeroAxis = editor.layers[key].layerEle.position();
            break;
        }
    }
    
    this.cursor = $('<div></div>').addClass('mapCursor').css('width', this.ratio * this.tilesize - 2).css('height', this.ratio * this.tilesize - 2).mousemove(function(event){ // mouse move event
          if(event.ctrlKey && editor.currentLayer.tile.lastPosition){
            self.drawTile(editor.currentLayer.tile.lastPosition, self.cursor.position());
            if(self.linkCollision){
                editor.collisionLayer.drawTile(editor.currentLayer.tile.lastPosition, self.cursor.position());
            }
          }
        });
    
    this.canvas = $('<canvas></canvas>').attr('width', layerWidth).attr('height', layerHeight);
    this.layerEle = $('<div></div>').addClass('MapLayer')
        .css('width', layerWidth)
        .css('height', layerHeight)
        .css('left', zeroAxis.left)
        .css('top', zeroAxis.top).append(this.cursor).append(this.canvas).mousemove(function(event){ // mouse move event
          if(event.target && event.target.className == 'mapCursor')
          return;
          self.moveCursor(event);
        });
    editor.mapContainer.append(this.layerEle);
    this.context = this.canvas[0].getContext('2d');
    this.imageObj = new Image();
    this.imageObj.src="../resource/biolab.png";
    
    
    var menuHtml = '<li class="layer" name=' + this.name + '>' +
	    '<input type="radio" name="layer" value="' + this.name + '" />&nbsp;' +
	    '<span name="index">' + this.index + '</span>: <span name="name">' + this.name + '</span>' +
	    ' <span name="size">(' + this.dimentionX + 'x' + this.dimentionY + ')</span>' +
	  '</li>';
    this.ele = $(menuHtml).click(function () {
      editor.selectLayer(self);
    }).attr('name', name);
    editor.layerContainer.append(this.ele);
    
    this.layerEle.draggable({
      drag: function(event, ui) {
        editor.moveBar({x: ui.position.left - editor.mapContainerWidth - editor.indent / 2,
                 y: ui.position.top - editor.mapContainerHeight - editor.indent / 2});  
      },
      stop: function(event, ui){
        editor.adjustAllOtherLayers(self);
      }
    });
  },
  
  moveCursor: function(event){
    var left = Math.floor(event.offsetX / this.ratio / this.tilesize) * this.ratio * this.tilesize;
    var top = Math.floor(event.offsetY / this.ratio / this.tilesize) * this.ratio * this.tilesize;
    
    this.cursor.show().css('left', left).css('top', top);
  },
  
  initData: function(){
    this.data = [];
    for(var i=0;i<this.dimentionX;i++){
        var row = [];
        for(var j=0;j<this.dimentionY;j++){
            row.push(0);
        }
        this.data.push(row)
    }
  },
  
  drawTile: function(lastPosition, cursorPosition){    
    this.context.drawImage(
	this.tile.image[0],
	lastPosition.left / 3, lastPosition.top / 3,
        this.tilesize, this.tilesize,
        cursorPosition.left, cursorPosition.top,
        this.ratio * this.tilesize, this.ratio * this.tilesize);
  }
});